<template>
    <h1>shallowRef:浅Ref</h1>
    <h2>{{ obj }}</h2>
    <button @click="fn">点击修改</button>

    <h2>{{ list }}</h2>
    <button @click="fn2">点击修改</button>

    <h2>{{ list2 }}</h2>
    <button @click="fn3">点击修改</button>


</template>

<script setup lang='ts'>
import { reactive, ref, shallowRef } from 'vue';

let obj=ref({
    name:"小米",
    age:18
});

function fn(){
    obj.value.name="李四";
}
console.log("obj",obj);

let list=reactive([]);
function fn2(){
    list=[1,2,3];
}
console.log("list",list);

let list2=shallowRef([]);
function fn3(){
    list2.value=[1,2,3];
}
console.log("list2",list2);


</script>

<style scoped>

</style>
